<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>小米商城</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style-type: none;
            vertical-align: 0;
        }

        a {
            text-decoration: none;
        }

        .box {
            width: 1300px;
            height: 686px;
            background-color: #f5f5f5;
            margin: 0 auto;
        }

        .hd {
            position: relative;
            height: 58px;

        }

        .ph {
            margin-left: 10px;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            color: #333;
        }

        .hd_ck {
            position: absolute;
            top: 0;
            right: 40px;
        }

        .ck {
            font-size: 16px;
            line-height: 58px;
            color: #424242;
            transition: all .4s;
        }

        .rd {
            width: 12px;
            height: 12px;
            padding: 4px;
            margin-left: 8px;
            border-radius: 20px;
            font-size: 12px;
            line-height: 12px;
            background: #b0b0b0;
            color: #fff;
        }


        .box2>a>img {
            height: 614px;
            width: 234px;
            margin-left: 20px;
        }

        #app {
            width: 992px;
            height: 628px;
            float: right;
            margin-right:40px;
        }

        #app>ul {
            list-style-type: none;
            height: 614px;
        }

        .list {
            position: relative;
            z-index: 1;
            float: left;
            width: 234px;
            margin-left: 14px;
            margin-bottom: 14px;
            background: #fff;


        }

        #app>ul>li>a {
            display: block;
            height: 100%;
            box-sizing: border-box;
            padding: 20px 0;
        }

        .pic2 {
            align-items: center;
        }

        .pic2>img {
            width: 160px;
            height: 160px;
            margin-left: 35px;
        }

        .title {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .des {
            margin: 0 10px 10px;
            height: 18px;
            font-size: 12px;
            color: #b0b0b0;
            text-align: center;
        }

        .price {
            margin: 0 10px 14px;
            text-align: center;
            color: #ff6700;
        }

        del {
            color: #b0b0b0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="hd">
            <p class="ph">手机</p>
            <div class="hd_ck">
                <a href="#" class="ck">查看更多</a>
                <i class="rd">></i>
            </div>
        </div>
        <div class="box2">
        <a href=""><img src="img/ad1.png" alt=""></a>
            <div id="app">
                <ul>
                    <li class="list" v-for="list in phoneList" key="list.id">
                        <a href="">
                            <div class="pic2"><img :src="list.img" alt=""></div>
                            <p class="title">{{list.title}}</p>
                            <p class="des">{{list.des}}</p>
                            <p class="price">{{list.price}}
                                <del>{{list.del}}</del>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    phoneList: [
                        { id: '100081', img: 'img/phone1.png', title: 'Redmi K50电竞版', des: '全线拉满的冷血旗舰', price: '3299元起' },
                        { id: '100082', img: 'img/phone2.png', title: 'Xiaomi 12 Pro', des: '全新骁龙8|2K AMOLED屏幕', price: '4699元起' },
                        { id: '100083', img: 'img/phone3.png', title: 'Xiaomi 12', des: '全新骁龙8|5000万主摄', price: '3699元起' },
                        { id: '100084', img: 'img/phone4.png', title: 'Xiaomi 12X', des: '骁龙870|5000万主摄', price: '2999元起' },
                        { id: '100085', img: 'img/phone5.png', title: 'Xiaomi 11 青春活力版', des: '轻薄5G，内外皆出彩', price: '1899元起', del: '1999元' },
                        { id: '100086', img: 'img/phone6.png', title: 'Redmi Note 11 Pro系列', des: '三星AMOLED高刷屏', price: '1799元起' },
                        { id: '100087', img: 'img/phone7.png', title: 'Redmi Note 11 5G', des: '5000mAh大电量', price: '1199元起' },
                        { id: '100088', img: 'img/phone8.png', title: 'Redmi Note11 4G', des: '5000mAh大电量', price: '969元起', del: '999元' }
                    ]
                }
            }
        }).mount('#app');
    </script>
</body>

</html>